<template>
	<div class="good">
		<p class="word-p">商品管理 <el-button style="float: right" type="primary" round @click="add()">+  添加商品</el-button></p>
		<el-form>
			<div class="word-base">
				<el-form-item>
					<el-select v-model="searchType" placeholder="按订单号查询">
						<el-option label="按商品id查询" value="ID" aria-selected></el-option>
						<el-option label="按商品名称查询" value="Name"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<div class="word-base1">
						<el-input placeholder="关键字" v-model="input" clearable></el-input>
					</div>
				</el-form-item>
				<el-form-item>
					<div class="word-base2">
						<el-button plain @click="search()">查询</el-button>
					</div>
				</el-form-item>
			</div>
		</el-form>
		<div style="margin-top: -10px;margin-left: 40px;">
			<el-table :data="list" stripe @row-click="data" style="width: 100%">
				<el-table-column prop="id" label="ID" width="180"></el-table-column>
				<el-table-column prop="name" label="信息" width="180"></el-table-column>
				<el-table-column prop="price" label="价格"></el-table-column>
				<el-table-column label="状态">
					<template slot-scope="scope" column-key>
						<span>{{scope.row.status |types}}</span>
						<el-button size="mini" type="warning" style="margin-right: 40px" @click="up(scope.$index, scope.row)">
							{{scope.row.status |types2}}
						</el-button>
					</template>
				</el-table-column>
				<el-table-column label="操作">
            <span  style="color: #000" @click="look()">
              查看
            </span>
					<span style="color: #000" @click="move()">编辑</span>
				</el-table-column>
			</el-table>
		</div>
		<div style="margin-left: 40px;margin-top: 20px">
			<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:page-size="pagesize"
					layout="prev, pager, next, jumper"
					:total="total">
			</el-pagination>
		</div>
	</div>
</template>
<script>
	import { price, Page, priceSearch, priceSearch1, up, Pgg } from "../../api/index.js";

	export default {
		name: "good",
		data(){
			return{
				input:"",
				list:[],
				total:0,
				pagesize:10,
				currpage:1,
				obj:[
					{id:"1", label:"按订名称查询"},
					{id:"2", label:"按商品id查询"},
				],
				id:"",
				home:{},
				flag:false,
				type:"",
				searchType:""
			}},
		mounted() {this.word()},
		methods:{
			async word() {
				const res = await price();
				this.list=res.data.list;
				this.total=res.data.total
			},
			data(row, event, column) {
				console.log(row);
				this.home=row
			},
			look(){
				if(this.home.id){
					this.$router.push({
						path:"/goodlist",
						query:{
							id:this.home.id,
							pageNum:this.currpage
						}
					})
				}
			},
			add(){
				this.$router.push("/goodadd")
			},
			move(){
				if(this.home.id){
					this.$router.push({
						path:"/goodmove",
						query:{
							id:this.home.id,
							pageNum:this.currpage
						}
					})
				}
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pagesize=val
			},
			handleCurrentChange(val) {
				this.currpage=val;
				if(!this.flag){
					Page(this.currpage).then(res=>{
						this.list=res.data.list
					})
				}else {
					Pgg({
						listType:"search",
						PageNum:this.currpage,
						[this.type]:this.input}
						).then(res=>{
						this.list=res.data.list
					})
				}
			},
			async search(){
				if(this.searchType){
					if(this.searchType=="ID"){
						this.type="productId"
					}else {
						this.type="productName"
					}
					if(this.input==""){
						this.flag=false;
						const res =await price(this.currpage);
						this.list=res.data.list

					}else {
						const req=await priceSearch1(
							{
								listType: "search",
								pageNum:1,
								[this.type]:this.input
							}
						);
						this.list=req.data.list;
						this.total = req.data.total;
						this.flag=true;
						console.log({[
							this.type]:this.input
						});

						const res =await priceSearch(
							{
								listType: "search",
								pageNum:1,
								[this.type]:this.input
							},
							{
								listType: "search",
								pageNum:1,
								[this.type]:this.input
							}
						);
						this.list=res.data.list;
						this.total = res.data.total;
					}
				}else {
					this.$message("请选择查询条件")
				}
			},
			async up(index,row){
				console.log(index,row);
				var open=""
				if(row.status==2){
					open="上架"
				}else {
					open="下架"
				}
				this.$confirm("确定要"+open+"该商品?","提示",{
					confirmButtonText:"确定",
					concelButtonText:"取消",
					type:"warning"
				})
					.then(async ()=>{
						var status =0;
						if(row.status==1){status=2}else {status=1}
						const  res =await up({
							productid:row.id,
							status:status
						});
						location.reload();
						this.$message({
							type:"success",
							message:open+"成功!"
						});
					}).catch(()=>{this.$message({
					type:"info", message:"已取消操作"})
					})
			}
		},
		filters:{
			types(val){return val ==2?"已下架":"在售";},
			types2(val){return val ==2?"上架":"下架"}},}
</script>
<style lang="scss" scoped>
	@import "./../../Scss/index";
	.word-p{
		@include FontOnly(24px);
		@include Mlt(40px,20px)
	}
	.word-base{
		@include Mlt(40px,0px);
		display: flex;
		.word-base1{
			width: 260px;
			margin-left: 40px;
		}
	}

</style>
